<template>
  <div class="top-setting">
    <SettingOutlined class="top-setting-icon" @click="openDrawerFlag = true" />
    <a-drawer
      v-model:open="openDrawerFlag"
      :closable="false"
      title="布局设置"
      rootClassName="top-setting-drawer"
    >
      <div class="top-setting-box">
        <div class="top-setting-box-left">主题颜色</div>
        <div class="top-setting-box-right">
          <div
            v-for="(item, index) in website.themeColors"
            :key="index"
            :style="{ backgroundColor: item }"
            class="top-setting-box-right-color"
            @click="(e) => changeThemeColor(item)"
          ></div>
        </div>
      </div>
      <div class="top-setting-box">
        <div class="top-setting-box-left">顶部颜色</div>
        <div class="top-setting-box-right">
          <div
            v-for="(item, index) in website.headerBgColors"
            :key="index"
            :style="{ backgroundColor: item }"
            class="top-setting-box-right-color"
            @click="(e) => changeHeaderBgColor(item)"
          ></div>
        </div>
      </div>
      <div class="top-setting-box">
        <div class="top-setting-box-left">侧边栏颜色</div>
        <div class="top-setting-box-right">
          <div
            v-for="(item, index) in website.menuColorList"
            :key="index"
            :style="{ backgroundColor: item.bgColor }"
            class="top-setting-box-right-color"
            @click="(e) => changeSubBarColor(item)"
          />
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import website from '@/config/website'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const openDrawerFlag = ref(false)

const setThemeColor = (color) => {
  userStore.setThemeColor(color)
  document.documentElement.style.setProperty(`--theme-color`, color)
}

const changeThemeColor = (color) => {
  setThemeColor(color)
}
const changeHeaderBgColor = (color) => {
  userStore.setHeaderBgColor(color)
}
const changeSubBarColor = (color) => {
  document.documentElement.style.setProperty(`--sidebar-sub-bg-color`, color.subBgColor)
  if (color.subBgColor == '#ffffff') {
    document.documentElement.style.setProperty(`--sidebar-sub-text-color`, '#000')
    document.documentElement.style.setProperty(`--sidebar-text-active-color`, '#000')
    document.documentElement.style.setProperty(
      `--sidebar-sub-bg-active-color`,
      'rgba(0, 0, 0, 0.06)'
    )
  } else {
    document.documentElement.style.setProperty(`--sidebar-sub-text-color`, '#fff')
    document.documentElement.style.setProperty(`--sidebar-text-active-color`, '#fff')
    document.documentElement.style.setProperty(
      `--sidebar-sub-bg-active-color`,
      'rgba(255, 255, 255, 0.5)'
    )
  }
  userStore.setMenuColor(color)
}

onMounted(() => {
  changeSubBarColor(userStore.menuColor)
  document.documentElement.style.setProperty(`--theme-color`, userStore.themeColor)
})
</script>

<style scoped lang="scss">
.top-setting {
  display: inline-block;
  padding: 0 10px;
  .top-setting-icon {
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    transition: 1s;
    &:hover {
      transform: rotateZ(100deg);
    }
  }
}
</style>

<style lang="scss">
.top-setting-drawer {
  .top-setting-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    border-radius: 5px;
    .top-setting-box-left {
      display: inline-block;
      text-align: center;
      flex: 1;
      text-align: left;
    }
    .top-setting-box-right {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 3;
      .top-setting-box-right-color {
        width: 20px;
        height: 20px;
        border-radius: 5px;
        cursor: pointer;
        border: 1px solid;
      }
    }
  }
}
</style>
